<template lang="">
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>页面信息管理</el-breadcrumb-item>
  <el-breadcrumb-item>分类管理</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
    <el-row>
    <el-col :span="7">
        <el-button type="primary" @click="add">添加</el-button>
    </el-col>
</el-row>


<el-table
    :data="cartList"
    style="width: 100%">
    <el-table-column label="序号" width="140" align="center">
    <template slot-scope="scope">
        {{scope.$index+1}}
    </template>
    </el-table-column>
    <el-table-column
      prop="cartId"
      label="分类编号"
      width="160"
      align="center">
    </el-table-column>
    <el-table-column
      prop="cartName"
      label="分类名称"
      width="200"
      align="center">
    </el-table-column>
    <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
  <el-button @click="handleDelete(scope.row)" type="text" size="small"
    >删除</el-button
  >
  <el-button @click="handleUpdate(scope.row)" type="text" size="small"
    >编辑</el-button
  >
</template>
            </el-table-column>
  </el-table>

<!-- 更新信息 -->
<el-dialog
  title="修改分类"
  :visible.sync="dialogVisible"
  width="30%">
  <el-form :model="updateForm" label-width="80px" ref="updateFormRef" :rule="updateFormRule">
  <el-form-item label="分类编号">
    <el-input v-model="updateForm.cartId" :disabled="true"></el-input>
  </el-form-item>
  <el-form-item label="分类名称">
    <el-input v-model="updateForm.cartName"></el-input>
  </el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
  </div>
</el-dialog>
<!-- 添加信息 -->
<el-dialog
  title="添加分类"
  :visible.sync="addDialogVisible"
  width="30%">
  <el-form :model="addForm" :rules="updateFormRule" ref="addForm" label-width="100px">
  <el-form-item label="分类名称" prop="cartName">
    <el-input v-model="addForm.cartName"></el-input>
  </el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAdd()">确 定</el-button>
  </div>
</el-dialog>
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      :total="total"
      layout="total,sizes, prev, pager, next, jumper"
      >
    </el-pagination>
</el-card>

    </div>
</template>
<script>
export default {
  name: "Cart",
  data() {
    return {
      addDialogVisible: false,
      updateDialogVisible: false,
      cartList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      updateForm: {
        cartId: "",
        cartName: "",
      },
      addForm: {
        cartName: "",
      },
      updateFormRule: {
        cartName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCartList();
  },

  methods: {
    async getCartList() {
      const { data: res } = await this.$api.cart.getCart({
        parms: this.queryInfo,
      });
      this.cartList = res.data.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
      this.total = res.data.length;
    },
    //监听页面变化做出数据改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCartList();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.getCartList();
    },
    async handleDelete(row) {
      const id = row.cartId;
      this.$confirm("此操作将永久删除该数据，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$api.cart.deleteCart(id);
          this.getCartList();
        })
        .catch(() => {
          // this.dialogVisible = false
        });
    },
    handleUpdate(row) {
      this.dialogVisible = true;
      this.updateForm = { ...row };
    },
    confirmUpdate() {
      const res = this.$api.cart.update(this.updateForm);
      this.dialogVisible = false;
      this.getCartList();
      //没有返回值，因为是boolean类型
      if (res.data.code !== 20031) {
        return this.$message.success("数据修改失败");
      }
      this.$message.success("数据修改成功");
    },
    async confirmAdd() {
      // console.log(this.addForm);很好的方法
      const res = await this.$api.cart.addCart(this.addForm);
      this.addDialogVisible = false;
      this.getCartList();
      console.log(res);
      //没有返回值，因为是boolean类型
      if (res.data.code !== 20011) {
        return this.$message.success("数据添加失败");
      }
      this.$message.success("数据添加成功");
    },
    add() {
      this.addDialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>